<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="650px"
  >
    <h5
      class="text-center"
      style="margin-top:10px"
    >开启自动充值，防止业务停滞</h5>
    <div
      class="flex justify-center"
      style="margin-top:20px;margin-bottom:10px"
    >
      <p
        v-if="type==2"
        class="font-12 color-666 flex align-center"
      >
        <img
          style="width:18px;height:18px;margin-right:7px"
          src="../../../assets/images/tip3.png"
          alt=""
        >随时随地，短信提醒
      </p>
      <p
        class="font-12 color-666 flex align-center"
        :style="{marginLeft:type==2?'80px':'0'}"
      >
        <img
          style="width:18px;height:18px;margin-right:7px"
          src="../../../assets/images/tip1.png"
          alt=""
        >防止欠费，避免损失
      </p>
      <p
        class="font-12 color-666 flex align-center"
        style="margin-left:80px"
      >
        <img
          style="width:18px;height:18px;margin-right:7px"
          src="../../../assets/images/tip2.png"
          alt=""
        >减少操作，省时省力
      </p>
    </div>
    <div class="form_info">
      <div class="form_item">
        <label>充值方式：</label>
        <div class="flex-1 flex align-center">
          {{type==1?'合同': type==2?'短信': '风控'}}{{type!=3?'余量':'次数'}}小于
          <el-input
            style="width:90px;margin-left:10px"
            placeholder="10"
            v-model="formData.baseline"
            clearable
            @input="val=>changeNumberInput('baseline',val)"
          >
          </el-input>
          <span
            class="suffix"
            style="margin-right:10px"
          >{{type!=3?'条':'次'}}</span>
          时自动充值
          <el-input
            style="width:90px;margin-left:10px"
            placeholder="100"
            v-model="formData.recharge_num"
            clearable
            @blur="calculate"
            @input="val=>changeNumberInput('recharge_num',val)"
          >
          </el-input>
          <span class="suffix">{{type!=3?'条':'次'}}</span>
        </div>
      </div>
      <div class="form_item">
        <label>花费金额：</label>
        <p class="flex-1">
          {{infoData.pay_total}}元<span class="color-999">（{{type==1?infoData.contract: type==2?infoData.sms_amount:infoData.risk_credit_price}}元/{{type!=3?'条':'次'}}）</span>
        </p>
      </div>
      <div class="form_item">
        <label>账户余额：</label>
        <div class="flex-1 flex"><span style="margin-right:20px">{{infoData.shop_balance}}元</span>
          <p>余额不足？<span class="blue-font pointer" @click="goToRecharge">去充值</span></p>
        </div>
      </div>
      <div class="form_item">
        <label>短信提示：</label>
        <div class="flex-1">
          <el-radio
            v-model="formData.sms_remind"
            :label="1"
          >开启</el-radio>
          <el-radio
            v-model="formData.sms_remind"
            :label="0"
          >关闭</el-radio>
          <span
            class="color-999"
            style="margin-left:10px"
          >{{type==1?'开启后将在短信增值服务自动开启':'开启后，账户金额不足将短信提醒'}}</span>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="form_item">
        <label v-if="type!=3">短信提示：</label>
        <div class="flex-1 rule_tip">
          <template v-if="type==1">
            1. 系统每日定时检查一次余量，满足条件则自动充值。<br />
            2. 优先使用可用现金付款，若账户余额不足，则无法充值。<br />
            3. 短信提醒开启后，扣款金额不足时将短信通知店铺联系人。
          </template>
          <template v-if="type==2">
            1. 系统每日定时检查一次余量，满足条件则自动充值。<br />
            2. 充值金额将从账户余额扣除，若账户余额不足，则无法充值。<br />
            3. 短信提醒开启后，扣款金额不足时将短信通知店铺联系人。
          </template>
        </div>
      </div>
    </div>
    <p style="padding-left:50px;margin-top:20px;margin-bottom:10px">
      <el-checkbox
        :class="{'check_form':showError}"
        v-model="checked"
        @change="showError=false"
      >开启及同意<span class="blue-font">《增值服务自动充值协议》</span></el-checkbox>
    </p>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        size="small"
        @click="dialogVisible = false"
      >取 消</el-button>
      <el-button
        size="small"
        type="primary"
        @click="submit"
      >确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { autoRechargeInfo, autoRecharge, riskCreditAutoRecharge } from "@/api/marketing";
export default {
  props: {
    dialogTitle: {
      type: String
    },
    type: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      dialogVisible: false,
      formData: {
        baseline: '',
        recharge_num: '',
        recharge_type: 1,
        sms_remind: 1
      },
      infoData: {},
      showError: false,
      checked: false
    }
  },
  methods: {
    goToRecharge() {
      let routeData = this.$router.resolve({
        name: "recharge"
      });
      window.open(routeData.href, '_blank');
    },
    submit() {
      if (!this.formData.baseline) {
        if(this.type!=3){
          this.$message({
            message: "请输入余量底线",
            type: "warning"
          });
          return;
        } else {
          this.$message({
            message: "请输入最低次数",
            type: "warning"
          });
          return;
        }
      }
      if (!this.formData.recharge_num) {
        this.$message({
          message: "请输入自动充值条数",
          type: "warning"
        });
        return;
      }
      if (this.infoData.pay_total > parseFloat(this.infoData.shop_balance)) {
        this.$message({
          message: "余额不足，请先充值",
          type: "warning"
        });
        return;
      }
      if (!this.checked) {
        this.$message({
          message: "请勾选开启并同意自动充值协议",
          type: "warning"
        });
        this.showError = true;
        return
      }
      this.formData.recharge_type = this.type;
      if(this.type !=3){
        autoRecharge(this.formData).then(res => {
          this.dialogVisible = false;
          this.$emit('getList');
        });
      }else{
        riskCreditAutoRecharge(this.formData).then(res =>{
          this.dialogVisible = false;
          this.$emit('getList');
        })
      }
    },
    calculate() {
      let num = this.formData.recharge_num || 0;
      let price = 0;
      if (this.type == 1) {
        price = parseFloat(this.infoData.contract);
      } else if(this.type == 2){
        price = parseFloat(this.infoData.sms_amount);
      } else {
        price = parseFloat(this.infoData.risk_credit_price)
      }
      this.$set(this.infoData, 'pay_total', (price * parseInt(num)).toFixed(2));
    },
    getData() {
      autoRechargeInfo(this.type).then(res => {
        this.infoData = { ...res } || {};
        this.calculate();
      })
    },
    changeNumberInput(key, value) {
      const pattern = /^[1-9][0-9]*$/ // 正整数的正则表达式
      // 不符合正整数时
      if (!pattern.test(value)) {
        // input 框绑定的内容为空
        this.formData[key] = ''
      }
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.getData();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.form_info {
  padding: 20px 30px;
  background: #f5f5f5;
  /deep/.el-divider--horizontal {
    margin: 10px 0;
  }
}
.suffix {
  width: 28px;
  height: 28px;
  background: #e6e6e6;
  border-radius: 0px 3px 3px 0px;
  box-sizing: border-box;
  line-height: 28px;
  text-align: center;
}
.check_form {
  /deep/.el-checkbox__inner {
    border-color: #ff4146;
  }
}
.form_item {
  display: flex;
  line-height: 35px;
  & > label {
    width: 100px;
    color: #666666;
  }
  /deep/.el-input__inner {
    height: 28px;
    border-radius: 3px 0px 0px 3px;
  }
  /deep/.el-input__icon {
    line-height: 28px;
  }
}
</style>
